<script setup>
import { ref } from 'vue';
import axios from 'axios'

const id = ref(1); // 查找的id
const student = ref({}); // getData和update所用的模型
const students = ref([]); // 所有学生列表


// 加载所有的students
axios.get('https://localhost:7002/api/students/getall').then(res => {
    students.value = res.data;
});

const getData = () => {
    // 完整写法
    // axios({
    //     url:'https://localhost:7002/api/students/getstudent',
    //     method:'get',
    //     params:{
    //         id: id.value
    //     }
    // })
    // 简单写法
    axios.get('https://localhost:7002/api/students/getstudent', {
        params: {
            id: id.value
        }
    }).then(res => {
        student.value = res.data;
    }).catch(error => {
        console.log(error.message); // axios提示
        console.log(error.response); // 返回结果
    })
}

const updateData = () => {
    // 完整写法
    // axios({
    //     url: 'https://localhost:7002/api/students/update',
    //     method: 'post',
    //     data: {
    //         id: student.value.id,
    //         name: student.value.name,
    //         age: student.value.age,
    //         gender: student.value.gender
    //     }
    // })
    // 简略写法
    axios.post('https://localhost:7002/api/students/update',
        {
            // id: student.value.id,
            // name: student.value.name,
            // age: student.value.age,
            // gender: student.value.gender
            ...student.value
        })
        .then(res => {
            if (res.status == 200) {
                console.log('更新成功：', res.data)
                // id和索引不见得对应，所以要手动获取下
                // const index = students.value.findIndex(item => item.id === student.value.id);
                // if (index !== -1) {
                //     students.value[index] = student.value;
                // }
                // 如果服务器有把更新后的数据返回，可以这么写
                const index = students.value.findIndex(s => s.id == res.data.id);
                if (index != -1) {
                    students.value[index] = res.data;
                }
            }
        }).catch(error => {
            console.log(error);
        })
}
</script>

<template>
    <div>
        <div>
            <ul>
                <li v-for="student in students" :key="student.id">
                    {{ student.id }}.{{ student.name }}-{{ student.age }}-{{ student.gender }}
                </li>
            </ul>
        </div>
        <div>
            <input type="text" v-model="id"><button @click="getData">get请求获取id为{{ id }}的学生</button>
        </div>
        <div v-if="student.id">
            <input v-model="student.id" type="hidden" /><br />
            <input v-model="student.name" type="text" /><br />
            <input v-model="student.age" type="text" /><br />
            <input v-model="student.gender" type="text" /><br />
            <button @click="updateData">修改id为{{ student.id }}的信息</button>
        </div>
    </div>
</template>